<template>
	<div id="WriteArticles">
		<div class="container">
			<el-form ref="Articleform" :model="Articleform" label-width="100px">
				<div class="plugins-tips">
					<el-input v-model="Articleform.title" placeholder="请输入文章标题" class="handle-input mr10"></el-input>
				</div>
				<mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px" />
				<!-- <quill-editor ref="myTextEditor" v-model="Articleform.article_content" :options="editorOption"></quill-editor> -->
				<div style="margin: 0.625rem 0 0 0;">
					<!-- <el-form ref="Articleform" :model="Articleform" label-width="80px"> -->
					<el-form-item label="摘要:">
						<el-input type="textarea" :rows="2" placeholder="摘要" v-model="Articleform.summary"></el-input>
					</el-form-item>
					<el-form-item label="文章分类">
						<el-select v-model="Articleform.article_category" placeholder="请选择">
							<el-option v-for="item in article_categoryOptions" :key="item.article_category_id" :label="item.title" :value="item.article_category_id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="文章隐私">
						<el-radio-group v-model="Articleform.article_model">
							<el-radio label="1">公开</el-radio>
							<el-radio label="0">私有</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="标签">
						<el-input type="textarea" :rows="2" placeholder="标签(逗号隔开)" v-model="Articleform.meta_keywords"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview"
						 :on-remove="handleRemove">
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible" size="tiny">
							<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</el-form-item>
					<el-form-item>
						<el-button class="editor-btn" type="primary" @click="saveEdit">发布</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import common from '../../common/common.js'
	import {
		constHelp
	} from '../../common/contant';

	import {
		mavonEditor
	} from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css'
	import bus from '../../common/bus';
	export default {
		name: 'markdown',
		data: function() {
			return {
				content: '',
				html: '',
				configs: {},
				"insertUpdateflage": 0,
				url: {
					// 添加文章
					insert_article: constHelp['WEBAPIURL'] + '/blogManage/insert_article',
					// 编辑文章
					update_article: constHelp['WEBAPIURL'] + '/blogManage/update_article',
					// 获取文章类型
					get_article_category_all_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_list',
				},
				"Articleform": this.$route.params,
				mainTreeData: [],
				ArticleTypeOptions: [], //下拉框数据
				ArticlePersonalTypeOptions: [], //下拉框数据
				dialogImageUrl: '',
				dialogVisible: false,
				article_categoryOptions: [],

			}
		},
		created() {
			// this.getTreeData();
			// this.ArticleTypecombox();
			// this.ArticlePersonalTypecombox();
			this.Articleform = this.$route.params;
			if (!common.IsNull(this.Articleform) && !common.IsNull(this.Articleform.title)) {
				this.insertUpdateflage = "1"
			}
			this.article_category_Type_combox()
		},
		components: {
			mavonEditor,
		},
		methods: {
			// 将图片上传到服务器，返回地址替换到md中
			$imgAdd(pos, $file) {
				var formdata = new FormData();
				formdata.append('file', $file);
				// 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
				this.$axios({
					url: constHelp['WEBAPIURL'] + '/blogManage/upload',
					method: 'post',
					data: formdata,
					headers: {
						'Content-Type': 'multipart/form-data'
					},
				}).then((url) => {
					this.$refs.md.$img2Url(pos, url);
				})
			},
			change(value, render) {
				// render 为 markdown 解析后的结果
				this.html = render;
			},
			//加载类型
			article_category_Type_combox() {
				this.$axios.get(this.url.get_article_category_all_list, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.article_categoryOptions = res.data.data;
					}
				})
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			// 获取菜单树
			getTreeData() {
				this.$axios.post(this.url.getTree, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.mainTreeData = res.data.data;
					}
				})
			},
			ArticleTypecombox() {
				this.$axios.get(this.url.ArticleTypeombox, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.ArticleTypeOptions = res.data.data;
					}
				})
			},

			ArticlePersonalTypecombox() {
				this.$axios.get(this.url.getArticlePersonalTypeLists, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.ArticlePersonalTypeOptions = res.data.data;
					}
				})
			},
			// 保存编辑 
			saveEdit() {
				var saveUrl = this.insertUpdateflage == 0 ? this.url.insert_article : this.url.update_article;
				this.Articleform.article_content = this.html
				this.$axios.post(saveUrl, this.Articleform, {
					withCredentials: true
				}).then((res) => {
					// alert(JSON.stringify(res.data))
					if (res.data.err == "0") {
						this.$message.success("保存成功");
					} else {
						this.$message.success("保存失败");
					}
				}).catch((response) => {
					this.$message.success('修改失败');
				})
			}
		}
	}
</script>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.editor-btn {
		margin-top: 20px;
	}
</style>
